<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>个人中心</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/css/styles.css" />
    <link href="css/css/top_bar.css" rel="stylesheet" type="text/css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="header">
      <div class="row" id="top_bar">
        <div class="fixed_div">  <!-- fixed_div -->
          <div class="webTitle">
            <a href="/index.html">
              <img src="image/art_logo.png">
            </a>
          </div>
          <div class="search">
            <img src="image/search.png">
            <input type="text" placeholder="搜索画室、标签">
          </div>
          <div class="switch-pages">
            <a href="/index.html"><span class="top_btn">首页</span></a>
            <a href="/Q&A.html"><span class="top_btn">问答</span></a>
            <a href="/gallery.html"><span class="top_btn">资料</span></a>
          </div>
          <div class="operation-btns">
            <span class="log_reg" data-toggle="modal" data-target="#logModal">登录</span>
            <span class="log_reg" data-toggle="modal" data-target="#regModal">注册</span>
            <div class="user">
              <div class="avatar_userName">
                <a href="/Info.html">
                  <div class="log_avatar">
                    <img src="image/emptyAvatar.jpg"> 
                  </div>  
                  <span class="userName">name</span>
                </a> 
              </div>

              <div class="hidden_first">
                <div class="triangle"></div>  
                <div class="user-list">
                  <div class="updateInfo" data-toggle="modal" data-target="#updateInfoModal">
                    <a href="/updateUserInfo.html">修改资料</a>
                  </div>
                  <div class="changePass" data-toggle="modal" data-target="#changePassModal">修改密码</div>
                  <div class="quit">退出</div>
                </div>
              </div>
            </div>
          </div> 
        </div>
      </div>

      <!-- logModal -->
      <div class="modal fade" id="logModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

        <div class="modal-dialog">
          <div class="modal-content">
            <div class="closeModal" data-dismiss="modal">
              <img src="image/CLOSE.png">
            </div>
            <div class="input-line">
              <img src="image/email.png" class="account-img">
              <input type="text" id="logAccount" placeholder="输入账号"/>
            </div>
            <div class="error"></div>
            <div class="input-line">
              <img src="image/lock.png" class="password-img">
              <input type="password" id="logPassword" placeholder="输入密码"/>
            </div>           
            <div class="error"></div>

            <div class="submit-holder">
              <img class="main-submit" src="image/login.png">
            </div>
            <div class="other_login">
              <img src="image/weibo.jpg">
              <span>其它登录：</span>
            </div>
          </div>
        </div>        
      </div>

      <!-- regModal -->
      <div class="modal fade" id="regModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="closeModal" data-dismiss="modal">
              <img src="image/CLOSE.png">
            </div>

            <div class="input-line">
              <div class="labels">
                <span>手机号码</span>
              </div>
              <input type="text" id="regPhone" class="short" placeholder="输入手机号码"/>
              <img class="getCode" src="image/getCode.png">
            </div>
            <div class="error"></div>
            <div class="input-line">
              <div class="labels">
                <span>验证码</span>
              </div>
              <input type="text" id="regCode" placeholder="输入手机验证码"/>
            </div>
            <div class="error"></div>
            <div class="input-line">
              <div class="labels">
                <span>密码</span>
              </div>
              <input type="password" id="regPassword" placeholder="输入密码"/>
            </div>           
            <div class="error"></div>
            <div class="input-line">
              <div class="labels">
                <span>密码</span>
              </div>
              <input type="password" id="regPassword2" placeholder="再次输入密码"/>
            </div>           
            <div class="error"></div>
            <div class="submit-holder">
              <img class="main-submit" src="image/reg.png">
            </div>
          </div>
        </div>        
      </div>

      <!-- changePassModal -->
      <div class="modal fade" id="changePassModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

        <div class="modal-dialog">
          <div class="modal-content">

            <div class="input-line">
              <input type="password" id="oldPassword" placeholder="输入旧密码"/>
            </div>
            <div class="error"></div>
            <div class="input-line">
              <input type="password" id="changePassword1" placeholder="输入新密码"/>
            </div>           
            <div class="error"></div>
            <div class="input-line">
              <input type="password" id="changePassword2" placeholder="确认新密码"/>
            </div>           
            <div class="error"></div>

            <div class="submit-holder">
              <img class="quit" src="image/cancel.png" data-dismiss="modal">
              <img class="main-submit" src="image/confirm.png">
            </div>
          </div>
        </div>        
      </div>
    </div>
    <div class="container">
      <!--userInfo-template-->
    </div>

    <!--template-->
    <!--我的评论-->
    <script id="comments" type="text/x-handlebars-template">
    {{#each problems}}
      <div class="articles" data-problemId={{problemId}}>
        <div class="left-col">
          <div>
            {{#if_empty ../../avatarUrl}}
              <img src='image/emptyAvatar.jpg'>
            {{else}}
              <img src={{../../avatarUrl}}>
            {{/if_empty}}
          </div>

          <div class="triangle"></div>
        </div> 
        <div class="right-col">
          <div class="problem-details">
            <h5>{{name}}</h5>
            <h6>{{publishTime}}</h6>
            <h5>{{content}}</h5>
            <div class="paintings">
              {{#if hasImage}}          <!-- 判断问题是否有图片 -->
                <img src={{image}}>
              {{/if}}

            </div>
            <div class="tags-showAll">
              <img src="image/tags.png">
              {{#each tag}}
                <span class="tags">{{this}}</span>
              {{/each}}
              
              <a class="showAll" href="/Q&A_details.html?problemId={{_id}}">显示全部</a>
            </div>
          </div>
          <div class="problem-comment">
            <div class="left-zan">
              <img src="image/comment.png">
              <span class="num">老师回答</span>
            </div>
            <div class="right-comment">
              <img src="image/comment.png">
              <span class="num">评论</span>
            </div>
          </div>
        </div> 
        <!-- 点击弹出评论框 -->
        <div class="show-comments">
          <div class="bottom-triangle"></div>  
          <div class="main-comments">
          </div>
          <div class="load-more">
             <button class="btn btn-default btn-md">加载更多</button>  
          </div>
        </div>
      </div>
    {{/each}}
    </script>
    <!-- 我的提问模板 -->
    <script id="problems-template" type="text/x-handlebars-template">
      {{#each problems}}
        <div class="articles" data-problemId={{_id}}>
          <div class="left-col">
            <div>
              {{#if_empty ../../avatarUrl}}
                <img src='image/emptyAvatar.jpg'>
              {{else}}
                <img src={{../../avatarUrl}}>
              {{/if_empty}}
            </div>
            <div class="triangle"></div>
          </div> 
          <div class="right-col">
            <div class="problem-details">
              <h5>{{name}}</h5>
              <h6>{{publishTime}}</h6>
              <h5>{{content}}</h5>
              <div class="paintings">
                {{#if hasImage}}          <!-- 判断问题是否有图片 -->
                  <img src={{image}}>
                {{/if}}

              </div>
              <div class="tags-showAll">
                <img src="image/tags.png">
                {{#each tag}}
                  <span class="tags">{{this}}</span>
                {{/each}}
                
                <a class="showAll" href="/Q&A_details.html?problemId={{_id}}">显示全部</a>
              </div>
            </div>
            <div class="problem-comment">
              <div class="left-zan">
                <img src="image/comment.png">
                <span class="num">老师回答</span>
              </div>
              <div class="right-comment">
                <img src="image/comment.png">
                <span class="num">评论</span>
              </div>
            </div>
          </div> 
          <!-- 点击弹出评论框 -->
          <div class="show-comments">
            <div class="bottom-triangle"></div>  
            <div class="main-comments">
            </div>
            <div class="load-more">
               <button class="btn btn-default btn-md">加载更多</button>  
            </div>
          </div>
        </div>
      {{/each}}
    </script>
    <!-- 评论内容模板 -->
    <script id="comments-template" type="text/x-handlebars-template">
      {{#each comments}}
        <div class="comment-content">
          <div class="comment-left-col">
            <div>
              {{#if_empty fromUserAvatarUrl}}
                <img src="image/emptyAvatar.jpg">  
              {{else}}
                <img src={{fromUserAvatarUrl}}>
              {{/if_empty}}
            </div>
          </div>
          <div class="comment-right-col">
            <h5>{{fromUserName}}</h5>
            <h6>{{publishTime}}</h6>
            <h5>{{content}}</h5>
          </div>
        </div>
      {{/each}}
    </script>

   
    <!--我的作品-->
    <script id="works" type="text/x-handlebars-template">
    {{#each collection}}
      {{#firstInRow @index}}
        {{#if @index}}
          </div> {{!如果不是第一张图片那么关闭上一行的标签}}
        {{/if}}
      <div class="pic_row_4">
        <div class="pic_row_item myWorkPic">
          <img src={{this}} alt="pic">
          <img src="image/delete.png" alt="delete" class="crossIcon hide">
        </div>
        {{else}}
        <div class="pic_row_item myWorkPic">
          <img src={{this}} alt="pic">
          <img src="image/delete.png" alt="delete" class="crossIcon hide">
        </div>
      {{/firstInRow}}
    {{/each}}
    </script>
    <script id="userInfo-template" type="text/x-handlebars-template">
    <div class="row">
      <div class="col-md-8 col.xs-8 col-sm-8 col-lg-8 tabsContainer">
        <div class="tabs">
          <ul>
            <li class="tab-nav active" data-ref="#myWork">TA的作品(<span>{{user.workNum}}</span>)</li>
            <li class="tab-nav" data-ref="#myQuestion">TA的提问(<span>{{user.askNum}}</span>)</li>
            <li class="tab-nav" data-ref="#myComment">TA的评论(<span>{{user.commentNum}}</span>)</li>
            <li class="tab-nav" data-ref="#mark">收藏(<span>0</span>)</li>
            <li class="tab-nav" data-ref="#subsribe">订阅(<span>{{user.subscriptionNum}}</span>)</li>
          </ul>
        </div>
        <div class="tabs-bodys">
          <div class="tabs-body show contentBlock" data-ref="#myWork" id="myWork">
            <!--插入我的作品模板-->
          </div>
          <div class="tabs-body" data-ref="#myQuestion" id="myQuestion" >我的提问</div>
          <div class="tabs-body" data-ref="#myComment" id="myComment">我的评论</div>
          <div class="tabs-body" data-ref="#mark" id="mark">收藏</div>
          <div class="tabs-body" data-ref="#subsribe" id="subscribe">订阅</div>
        </div>
      </div>
      <div class="col-md-4 col-xs-4 col-sm-4 col-lg-4 ">
        <div class="socialInfo">
          <div class="row profile">
            <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12">
              {{#if user.avatarUrl}}
                <img src={{user.avatarUrl}} alt="avator">
              {{else}}
                <img src="image/emptyAvatar.jpg" alt="avator">
              {{/if}}
              
              <p id="userName">{{user.name}}</p>
            </div>
          </div>
          <div class="row socialNum">
            <div class="col-md-6 ">
              <p>
                <span>{{user.fanNum}}</span></br>
                <a href="othersFans.html?userId" id="fansLink">粉丝<a/>
              </p>
            </div>
            <div class="col-md-6">
              <p>
                <span>{{user.followNum}}</span></br>
                <a href="othersFollow.html?userId" id="followLink">关注<a/>
              </p>
            </div>
          </div>
      </div>

        <div id="followBtnContainer">
          <button class="btn btn-primary btn-lg btn-block" id="followThisGuy" type="button">关注</button>
        </div>

      </div>
    </div>

    </script>
    <script src="js/thirdparty/require.js" data-main="js/otherInfo"></script>
   <!-- <script src="js/thirdparty/jquery-2.1.4.min.js"></script>
    <script src="js/thirdparty/bootstrap.js"></script>
    <script src="js/thirdparty/handlebars-v3.0.3.js"></script>
    <script src="js/thirdparty/less-1.7.0.min.js"></script>
    <script src="js/util.js"></script>
    <script src="js/appConfig.js"></script>
    <script src="js/info.js"></script>-->

      <div class="footer">
        <div class="footerContent">
          <ul class="footerList">
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">广告业务</a></li>
          </ul>
          <p class="icp">京备123号</p>
          <h2>美术帮</h2>
        </div>
      </div>
    
  </body>
</html>